<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>主页</el-breadcrumb-item>
      <el-breadcrumb-item>财务管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺账户</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="acrd">
      <h5>店铺账户</h5>

      <!-- 账户余额 -->
      <div class="account-moeny">
        <span class="span">账户余额:&nbsp;<span class="span1">￥</span><span class="size">{{addFormList.user_money}}</span></span>
      </div>

      <!-- 提现金额 -->
       <div class="account-moeny">
        <span class="span">可提现金额:&nbsp;<span class="span1">￥</span><span class="size">{{addFormList.user_txmoeny}}</span></span>
        <p class="p">注：部分金额由于订单尚未完成，资金处于冻结状态</p>
        <a href="javascript:;" @click="$router.push('/account')">账户明细</a>
        <div class="tx"><el-button type="primary"  @click="dialogVisible = true">提现</el-button></div>
        <p class="p">注：提现到开通商户的微信钱包</p>
      </div>
    </el-card>
    <!-- 点击提现按钮弹出框 -->
  <el-dialog
  title="提现"
  :visible.sync="dialogVisible"
  width="40%"
  >
  <!-- 表单 -->
  <el-form :model="addFormList" :rules="addFormLaistRules" ref="addFormRef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="账户余额" prop="user_moeny" class="ipt">
    <el-input v-model="addFormList.user_money" :disabled="true" ref="addye"></el-input>
  </el-form-item>
  <el-form-item label="提现金额" prop="user_txmoeny">
    <el-input v-model="addFormList.user_txmoeny" ref="addtx" type="Number" class="ipt"> </el-input>
  </el-form-item>
  </el-form>
  <!-- /表单 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addFormRefs">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import '@/mock/zbsmock.js'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      dialogVisible: false,
      addFormList: {
        user_money: 0,
        user_txmoeny: 0
      },
      addFormLaistRules: {
          user_txmoeny: [
            { required: true, message: '请输入提现金额', trigger: 'blur' }
          ]
      }
    }
  },
  computed: {
  },
   watch: {},
  created () {
  this.loadAccount()
  },
  mounted () {
  },
  methods: {
    open() {
      this.$alert('这是一段内容', '用户提现', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    },
     addFormRefs(addFormRef) {
        this.$refs.addFormRef.validate((valid) => {
          if (valid) {
            if (this.addFormList.user_txmoeny > this.addFormList.user_money || this.addFormList.user_txmoeny <= 0) {
              this.$message('提现金额不能大于或者小于账户余额也不能填写0，请重新填写提现金额')
              this.addFormList.user_txmoeny = this.addFormList.user_money
            } else {
            this.addFormList.user_money = this.addFormList.user_money - this.addFormList.user_txmoeny
            this.addFormList.user_txmoeny = this.addFormList.user_money
            this.$message('提现成功，祝你体现愉快')
            this.dialogVisible = false
            // this.$refs.addye.value = this.$refs.addye.value - this.$refs.addtx.value
            //   console.log(this.$refs.addye.value)
            }
          } else {
            this.$message('提现金额不能为空')
            this.addFormList.user_txmoeny = this.addFormList.user_money
            return false
          }
        })
     },
    // 获取数据
    async loadAccount() {
      const { data: res } = await this.axios.post('/goods')
      this.addFormList = res.data.list
    }
  }
}
</script>

<style scoped lang="less">
.acrd{
  padding: 0px;
}
.account-moeny {
  margin: 0px 0px 15px 40px;
}
.span{
  font-weight: 800;
  font-size: 20px;
}
.span1{
  font-size: 15px;
  font-weight: 400;
}
.size{
  font-size: 30px;
  color: #ff0d0d;
}
.p{
  font-size: 10px;
  margin: 0px 0px 15px 0px;
}
.tx{
  margin: 15px 0px;
}
.ipt{
  width: 200px;
}

</style>
